<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQ测试</title>
<script src="../js/jquery/jquery-3.3.1.slim.js"></script>
<!-- 引用CDN的库，上面的库没有slide等方法 -->
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">

	//定义全局变量
	var isShow = false;
	
	function getResult() {
		//调用JQ方法---$().XXX 方法
		$().getRes();
	}
	
	$(document).ready(function() {
		//这格式有点拗口，(document).ready(function(){})	相当于document对象调用ready，然后回调function函
	})
	
	//简写
	$(function() {
		//直接调用函数
		$("input").css("background-color","#abcdef");
		
		//创建一个方法对象，$.fn.XXX = function(){}
		$.fn.getRes = function() {
			var number = $("#number").val();
			alert("JS调用JQ："+ number);
		}
		
		//定义其他方法
		$("#button2").click(function() {
			//调用JS的方法，直接调用就好了
			getResult();
			if(isShow){
				//貌似匿名的回调没生效
				$("#button").hide(1000,function(){
					$("#button").css("backgroun-color","red");
				});
				isShow = false;
			}else{
				$("#button").show(1000,callback());
				isShow = true;
			}
			//奇怪了？怎么调用一个的时候，就button一直slide隐藏啊？这里我是number欸= =
			//$("#number").slideOut();			//原来都没这个方法，只有slideUp和Down = =
			//是因为slideIn函数有问题？可能是因为上面的hide和show方法影响到了，测试之后也不是。
			$("#number").slideToggle();
			$("#button").fadeToggle("fast");
			
			//链式调用,其中可以通过dom的text,val,html获取到元素里面的内容
			//而attr可以设置属性
			$("a").css("color","red")
				.text("Shoot to JQ")
				.attr("href","Login.html")		//设置单个属性，链式调用只能设置单个属性
				.slideUp(2000)
				.slideDown(2000);
			
			//animate方法执行多个值变化
			$("#test_anim").animate({
				height:"toggle",
				width:"+=10px",
				left:"200px",
				opacity:"0.6"
			},"fast");
		})
		
		function callback() {
			//回调函数
			$("#button2").css("background-color","green");
		}
	});
</script>

</head>
<body>
	输入数字：<input type="text" id="number"/>
	</br>
	<button id="button" onclick="getResult()">提交</button>
	</br>
	<button id="button2">试试调用JS？</button>
	
	<div id="test_anim" style="height: 100px;width: 100px;background: #abcdef"/>
	<a style="height: 100px;width: 100px;background: #eeffee" href="../common/Error.html" title="错误错误">来试试我的链式调用吧`hahha</a>
</body>
</html>